<template>
	<view>
		<view class="bj"></view>
		<!-- <view class="bj2"></view> -->
		<view class="title">抽到一张
			<text class="woman" v-if="data.sex==2">女生</text>
			<text class="man" v-else>男生</text>
			交友纸条
		</view>
		<view class="tips">喜欢就快去加好友吧!</view>
		<view class="content">
			<view class="list-top">
				{{data.content}}
			</view>
			<view class="list-image">
				<image 
				v-for="(item,ink) in data.images" 
				:key="ink" 
				:src="item"
				 @click.stop="pictureView(ink,data.images)" 
				 mode="aspectFill"
				></image>
			</view>
			<view class="list-bottom" >
				{{data.sex==2?'她':'他'}}留的微信号 {{data.contact}} <view @click="oncopy(data.contact)">复制</view>
			</view>
		</view>
		<view class="tips-view">
			<view>· 纸条内容为网友发布,平台不保证真实性,请注意甄别,如对方要求转账等行为请勿轻信,谨防诈骗</view>
			<view>· 我抽到的全部纸条可在<text @click="onmy">我的纸条</text>页面查看</view>
		</view>
		<view class="btn" @click="onback">
			返回首页
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{
					
				},
				id:0
			};
		},
		methods:{
			// 预览图片
			pictureView(index,imags){
				console.log(imags,'---imags--')
				let imgs = imags.map( item =>{
				//只返回图片路径
					return item
				})
				// console.log(imgs);
				//调用预览图片的方法
				uni.previewImage({
					urls:imgs,
					current:index
				})
			},
			onmy(){
				uni.navigateBack({
				    delta: 1
				});
			},
			onback(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			oncopy(data){
				uni.setClipboardData({
				    data: data,
				    success: function () {
				        console.log('success');
						  uni.showToast({
						  	title: '文字已复制',
						  	icon: 'success',
						  	duration: 2000
						  })
				    },
					fail: (err) => {
						console.log(err,)
					}
				});
			},
		},
		onLoad(option) {
			this.data = JSON.parse(option.data)
		}
	}
</script>
<style>
	page{
		padding: 107rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}
</style>
<style scoped lang="less">
.bj{
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to right, #f4cccc, #cfe2f3); /* 标准的语法 */
	position: fixed;
	top: 0;
	left: 0;
	z-index: -2; 
}
.bj2{
	width: 100vw;
	height: 100vh;
	background-image: url(../../static/bj.png) ;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
.title{
	width: 100%;
	height: 65rpx;
	line-height: 65rpx;
	font-size: 47rpx;
	font-weight: bold;
	text-align: center;
}
.woman{
	color: #f756b4;
}
.man{
	color: #6881d3;
}
.tips{
	height: 37rpx;
	line-height: 37rpx;
	text-align: center;
	font-size: 26rpx;
	margin-top: 30rpx;
}
.content{
	width: 100%;
	border: 4rpx solid #000000;
	border-radius: 15rpx;
	margin-top: 65rpx;
	padding: 30rpx 0 30rpx 30rpx;
	box-sizing: border-box;
	background-color: #fff;
}
.list-top{
	width: 100%;
	line-height: 42rpx;
	font-size: 27rpx;
	font-weight: 500;
}
.list-image{
	width: 100%;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
	margin-top: 19rpx;
	border-bottom: 1rpx solid #e7e7e7;
	image{
		width: 162rpx;
		height: 162rpx;
		margin-bottom: 28rpx;
	}
}
.list-image:after {
	content: "";
	width: 162rpx;
}
.list-bottom{
	width: 100%;
	height: 59rpx;
	line-height: 59rpx;
	padding-right: 30rpx;
	box-sizing: border-box;
	color: #000;
	font-size: 26rpx;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
	margin-top: 28rpx;
	font-weight: 500;
	view{
		width: 88rpx;
		line-height: 59rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		background: #000;
		color: #fff;
		border-radius: 30rpx;
	}
}
.tips-view{
	width: 100%;
	background-color: #fcfaee;
	border-radius: 15rpx;
	margin-top: 65rpx;
	padding: 32rpx 18rpx 10rpx 18rpx;
	box-sizing: border-box;
	margin-bottom: 100rpx;
	view{
		line-height: 44rpx;
		font-size: 27rpx;
		color: #aba14a;
		text{
			color: #6e757b;
		}
	}
}
.btn{
	width: 100%;
	height: 99rpx;
	border-radius: 24rpx;
	background: #000000;
	line-height: 99rpx;
	text-align: center;
	color: #fff;
	font-size: 26rpx;
	margin-top: 103rpx;
}
</style>
